<template>
	<view class="container container32674">
		<view class="flex diygw-col-24 diygw-bottom bar-clz">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/txsb.png"></image>
						</view>
						<view class="diygw-grid-title"> 图像识别 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/3wzsb.png"></image>
						</view>
						<view class="diygw-grid-title"> 文本识别 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/wbjc.png"></image>
						</view>
						<view class="diygw-grid-title"> 文本纠错 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/txdmh-copy.png"></image>
						</view>
						<view class="diygw-grid-title"> 人像动漫风 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-autoview diygw-col-24 flex-direction-column autoview1-clz">
			<view>
				<image src="/static/e05b-kphwumr4958710.png" class="top" ></image>
			</view>
		</view>
		<view class="flex diygw-autoview diygw-col-24 flex-direction-column autoview-clz">
			<view class="diygw-absolute autoview_0">
				<view class="diygw-col-24 text-clz"> 图像识别 </view>
			</view>
		</view>


		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef"
			class="flex diygw-form diygw-col-24">
			<u-form-item :borderBottom="false" :required="true" class="diygw-col-24" label="上传图片" labelPosition="top"
				prop="upload">
				<u-upload width="160" height="160" :before-upload="beforeUpload" action="http://localhost:8080/img"
					ref="uploadRef" :auto-upload="false" @upload-success="handleUploadSuccess"></u-upload>
			</u-form-item>
			<view @click="submitForm" class="diygw-col-24 bg-none text4-clz">提交</view>
		</u-form>












		<view class="flex diygw-col-24 diygw-bottom bar1-clz">
			<view class="diygw-grid diygw-actions">
				<button @tap="navigateTo" data-type="page" data-url="/pages/img/img" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/txsb.png"></image>
						</view>
						<view class="diygw-grid-title"> 图像识别 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/text/text" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/3wzsb.png"></image>
						</view>
						<view class="diygw-grid-title"> 文本识别 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/nlp/nlp" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/wbjc.png"></image>
						</view>
						<view class="diygw-grid-title"> 文本纠错 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/cartoon/cartoon" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="font-size: 56rpx">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/txdmh-copy.png"></image>
						</view>
						<view class="diygw-grid-title"> 人像动漫风 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="diygw-col-24 text1-clz"> 识别结果: <br><br></view>
		<view >
			<view v-for="(item, index) in this.datas" :key="index" class="result-item">
			            <text class="keyword">关键词：{{ item.keyword }}<br></text>
			            <text class="root">分类：{{ item.root }}&nbsp;<br></text>
			            <text class="score">置信度：{{ formatScore(item.score) }}<br></text>
						<br>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	import axios from 'axios';

	export default {

		data() {
			return {
				recognitionResult: "",
				datas:[],

			};
		},
		onShow() {
			this.setCurrentPage(this);
		},

		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			submitForm() {
				return new Promise((resolve, reject) => {
					const uploadRef = this.$refs.uploadRef;
					uploadRef.upload({
						success: res => {
							console.log('上传成功，后端返回的数据:', res);
							this.handleUploadSuccess(
							res); // Call a method to handle the successful upload
							resolve(res); // Upload successful, call resolve
						},
						fail: err => {
							console.error('上传失败:', err);
							this.handleUploadFail(err); // Call a method to handle upload failure
							reject(err); // Upload failed, call reject
						}
					});
				});
			},
			handleUploadSuccess(data) {
				console.log('接收到的上传成功数据:', data);
				const responseData = JSON.parse(data);
				this.datas = responseData.result.slice(0, 3);
			
				console.log('保存数据:', this.datas);
			
				
			},
			
			formatScore(score) {
			      return (score * 100).toFixed(2) + '%';
			    }
			
			

			


		}
	};
</script>

<style lang="scss" scoped>
	.top{
		width: 320px;
		height: 187.19px;
		margin-left: 36px;
	}
	.bar-clz {
		font-size: 26rpx !important;
	}

	.autoview1-clz {
		z-index: 1000;
		height: 360rpx;
	}

	.autoview1_0 {
		left: 58rpx;
		top: 16rpx;
		width: 638rpx;
		height: 336rpx;
		z-index: 0;
	}

	.autoview1_0>.flex {
		height: 100%;
	}

	.autoview-clz {
		z-index: 1000;
		height: 120rpx;
	}

	.autoview_0 {
		left: 126rpx;
		top: 16rpx;
		width: 456rpx;
		height: 118rpx;
		z-index: 0;
	}

	.autoview_0>.flex {
		height: 100%;
	}

	.text-clz {
		font-size: 64rpx !important;
		text-align: center;
	}

	.text4-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #ffffff;
		font-weight: bold;
		letter-spacing: 6rpx !important;
		padding-left: 10rpx;
		font-size: 32rpx !important;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		margin-right: 30rpx;
		background-color: #2a928f;
		margin-left: 30rpx;
		box-shadow: 0rpx 6rpx 14rpx rgba(64, 195, 3, 0.35);
		overflow: hidden;
		width: calc(100% - 30rpx - 30rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 10rpx;
	}

	.bar1-clz {
		font-size: 26rpx !important;
	}

	.text1-clz {
		font-size: 44rpx !important;
	}

	.autoview2-clz {
		z-index: 1000;
		height: 400rpx;
	}

	.autoview2_0 {
		left: 88rpx;
		top: 48rpx;
		width: 662rpx;
		height: 288rpx;
		z-index: 0;
	}

	.autoview2_0>.flex {
		height: 100%;
	}

	.text2-clz {
		font-size: 36rpx !important;
	}

	.container32674 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container32674 {
		padding-bottom: 80px;
	}
	
	.result-item{
		margin-left: 50px;
		font-size: 13px;
	}
	
</style>
